<!--
 * @Author: C.
 * @Date: 2022-01-20 10:01:00
 * @LastEditTime: 2022-02-14 16:46:23
 * @Description: file content
-->
<template>
  <div>
    <jv-table :tableObj="tableObj">
      <template #name="{ record }">
        <el-tag type="success">{{ record }}</el-tag>
      </template>

      <template #age="{ record, row }">
        我叫{{ row.name }},今年{{ record }}岁
      </template>
      <template #process="{ record }">
        <el-progress :percentage="record * 100"></el-progress>
      </template>
      <template #operation="{ row }">
        <TableAction
          :actions="[
            {
              label: '删除',
              icon: 'el-icon-delete',
              popConfirm: {
                title: '是否删除？',
                confirm: operation.bind(null, row)
              }
            },
            {
              icon: 'el-icon-delete',
              disabled: true,
              popConfirm: {
                title: '是否删除？',
                confirm: operation.bind(null, row)
              }
            }
          ]"
          :dropDownActions="[
            {
              label: '启用',
              popConfirm: {
                title: '是否启用？',
                confirm: operation.bind(null, row)
              }
            }
          ]"
        />
      </template>
      <Action
        size="mini"
        slot="btn-list"
        actionType="primary"
        :actions="[
          {
            label: '删除',
            confirm: operation
          },
          {
            label: '表格调整',
            confirm: doLayout
          },
          {
            label: '新增',
            confirm: addNew
          }
        ]"
      >
      </Action>
    </jv-table>
  </div>
</template>
<script>
import { getTableData } from "../../../mock/tableData";
const formSchema = [
  {
    prop: "Keyword",
    label: "请假类型",
    cpn: "FormSelect",
    default: "请假",
    options: {
      list: [
        {
          value: "请假",
          label: "请假"
        },
        {
          value: "调休",
          label: "调休"
        }
      ]
    }
  },
  {
    prop: "Keyword1",
    label: "请假类型3",
    cpn: "FormSelect",
    hidden: true,
    options: {
      list: [
        {
          value: "请假",
          label: "请假"
        },
        {
          value: "调休",
          label: "调休"
        }
      ]
    }
  },
  {
    prop: "Date",
    label: "日期范围",
    cpn: "DateRange"
  }
];
const tableConfig = [
  {
    prop: "image",
    label: "图片",
    cpn: "Image",
    width: "90px",
    cpnProps: {
      // fit:'scale-down'
      // 宽高默认 38px
      // width:'50px',
      // height:'50px',
      // 自定义前缀 不填为默认路径
      preUrl: "https://fuss10.elemecdn.com/"
    },
    // 导出配置
    exportConfig: {
      // 禁用这个字段的导出功能
      disabled: true
    }
  },
  {
    prop: "id",
    label: "编号",
    cpn: "Link",
    cpnProps: {
      // 路由名称
      routeName: "detail",
      // 路由路径（名称和路径二选一）
      // routePath:'/dashboard',
      // 路由传参方式 默认query
      methods: "query",
      // 传参的键名，值为当前数据
      parameterKey: "BillId",
      // 补充动态参数
      moreDynamicParameters: [
        {
          keyName: "resId",
          valueName: "name"
        },
        {
          keyName: "BillId",
          valueName: "id"
        }
      ],
      // 补充静态参数
      moreStaticParameters: {
        type: 1
      }
    }
  },
  {
    prop: "age",
    label: "年龄",
    custom: true,
    innerSearch: {
      prop: "Keyword",
      cpn: "FormInput",
      label: "年龄"
    }
  },
  {
    prop: "process",
    label: "进度",
    custom: true,
    width: "150px"
  },
  {
    prop: "amount",
    label: "金额（元）",
    align: "right",
    width: 150,
    filter: "amount",
    commonConfig: {
      summary: true,
      unit: "元"
    }
  },
  {
    prop: "quantity",
    label: "数量",
    width: 150,
    align: "right",
    filter: "amount",
    commonConfig: {
      summary: true,
      unit: "个"
    }
  },

  {
    prop: "date",
    label: "时间",
    filter: "date",
    width: 150,
    innerSearch: {
      prop: "Date",
      cpn: "DateRange",
      label: "时间范围"
    }
  }
];
export default {
  data() {
    return {
      tableObj: {}
    };
  },
  created() {
    this.tableObj = this.$JTable({
      tableSchema: tableConfig,
      formSchema,
      rowId: "id",
      title: "表格标题1",
      // importBar: true,
      selectType: "checkBox",
      printMod: "sales",
      // fullScreenBar: true,
      showSummary: true,
      height: 500,
      api: {
        getData: getTableData
      }
    });
    this.tableObj.getData();
  },
  methods: {
    operation(row) {
      if (!row) return;
      alert(row.name);
    },
    doLayout() {
      this.tableObj.doLayout();
    },
    addNew() {
      // this.$router.push({
      //   name: "form"
      // });
    }
  }
};
</script>
